<template>
  <div class="ProjectManageDetail">
    <div class="menu" v-show="showMenu">
      <div class="xmgl" :class="{'activeMenu' : type === 'detail'}" @click="toDeatil">
        <a-icon type="appstore"/>
        项目概览
      </div>
      <div class="interface" @click="showInterfaceTree = !showInterfaceTree" @mouseenter="showAdd = true"
           @mouseleave="showAdd = false">
        <div class="text">
          接口
          <a-icon v-show="!showInterfaceTree" type="caret-right"/>
          <a-icon v-show="showInterfaceTree" type="caret-down"/>
        </div>
        <div v-show="showAdd" class="btn" @mouseleave="showAddList = false">
          <div class="icon" @mouseenter="showAddList = true">
            <a-icon type="plus"/>
          </div>
          <div v-show="showAddList" class="addList">
            <div class="item" @click="addInterface">
              <a-icon type="control"/>
              新建分组
              <a-icon type="control"/>
              新建接口
            </div>
          </div>
        </div>
      </div>
      <div class="tree">
        <a-tree
          :tree-data="treeData"
          :defaultExpandAll="true"
          :replace-fields="replaceFields"
          @select="onSelect"
        >
          <template v-slot:title="treeData">
            <a-row>
              <a-col :flex="10" title="treeData.name">{{ treeData.name }}</a-col>
              <a-col :flex="1">
                <a-button-group>
                  <a-button size="small" @click="addNode(nodeData)">新增下级</a-button>
                  <a-button size="small" @click="editNode(nodeData)">修改</a-button>
                  <a-popconfirm
                    title="确认该分组？"
                    ok-text="确认"
                    cancel-text="取消"
                    @confirm="deleteNode(nodeData)"
                  >
                    <a-button size="small">删除</a-button>
                  </a-popconfirm>
                </a-button-group>
              </a-col>
            </a-row>
          </template>
        </a-tree>
      </div>
    </div>
    <div class="content" :class="{'content2': !showMenu}">
      <div v-if="type === 'detail'" class="detail">
        <!--项目统计-->
        <div class="xmtj">
          <div class="tit">项目统计</div>
          <div class="val">
            <div class="item">
              <div class="num">1</div>
              <div class="text">接口数</div>
            </div>
            <div class="item">
              <div class="num">0</div>
              <div class="text">接口用例数</div>
            </div>
            <div class="item">
              <div class="num">0</div>
              <div class="text">文档数</div>
            </div>
            <div class="item">
              <div class="num">0</div>
              <div class="text">数据模型数</div>
            </div>
            <div class="item">
              <div class="num">0</div>
              <div class="text">测试用例数</div>
            </div>
            <div class="item">
              <div class="num">0</div>
              <div class="text">测试套件数</div>
            </div>
          </div>
        </div>
        <!--在线分享-->
        <div class="share">
          <div class="tit">
            在线分享
          </div>
          <div class="tip">
            <a-icon type="info-circle"/>
            将接口文档以 URL 形式分享出去，方便外部团队在线查看！
          </div>
          <div class="btn">
            <span>+ 新建分享</span>
          </div>
        </div>
        <div class="tools">
          <!--自动导入-->
          <div class="item">
            <div class="tit">自动导入</div>
            <div class="tip">
              <a-icon type="info-circle"/>
              自动将 OpenAPI (Swagger) 或 apiDoc 格式的在线 URL 口数定时导入到 Apifox。
            </div>
            <div class="btn">
              <a-icon type="interaction"/>
              去开启
            </div>
          </div>
          <!--代码生成-->
          <div class="item">
            <div class="tit">代码生成</div>
            <div class="tip">
              <a-icon type="info-circle"/>
              根据接口/模型定义，自动生成各种语言/框架(如TypeScript、 Java、 Go、 Swift、 ObjectiveC、 Kotlin、 Dat、C++、C#、Rust等 130种语言及框架) 的业务代码(如 Model、 Controller、单元测试代码等)
            </div>
            <div class="btn">
              <a-icon type="code"/>
              立即生成
            </div>
          </div>
        </div>
        <!--操作-->
        <div class="opt">
          <a-tabs default-active-key="1">
            <a-tab-pane key="1" tab="前置操作">
              <div class="tip">
                <p></p>
                <a-icon type="info-circle"/>
                全局前置操作，项目内所有接口运行时都会执行此处设置的前置操作。
              </div>
              <div class="btn">
                <span>添加前置操作 <a-icon type="down"/></span>
              </div>
            </a-tab-pane>
            <a-tab-pane key="2" tab="后置操作">
              <div class="tip">
                <p></p>
                <a-icon type="info-circle"/>
                后置操作
              </div>
            </a-tab-pane>
            <a-tab-pane key="3" tab="Auth">
              <div class="tip">
                <p></p>
                <a-icon type="info-circle"/>
                Auth
              </div>
            </a-tab-pane>
            <a-tab-pane key="4" tab="更多设置">
              <div class="tip">
                <p></p>
                <a-icon type="info-circle"/>
                更多设置
              </div>
            </a-tab-pane>
          </a-tabs>
        </div>
      </div>
      <div v-if="type === 'newInterface'" class="newInterface">
        <div class="top">
          <div class="path">
            <div class="type">
              <a-select
                show-search
                v-model="interfaceType"
                style="width: 100%"
              >
                <a-select-option v-for="(type,index) in typeList" :value="type" :key="index + ''">
                  {{ type }}
                </a-select-option>
              </a-select>
            </div>
            <div class="url">
              <a-input style="height: 100%" placeholder="接口路径，“/”起始" v-model="interfacePath"></a-input>
            </div>
          </div>
          <a-button type="primary" @click="save">
            保存
          </a-button>
        </div>
        <div class="form">
          <a-form-model
            :rules="rules"
            :model="form"
          >
            <a-row>
              <a-col :span="8">
                <a-form-model-item label="名称" prop="name">
                  <a-input v-model="form.name"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="分组" prop="group">
                  <a-input v-model="form.group"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="状态" prop="status">
                  <a-select
                    v-model="form.status"
                  >
                    <a-select-option v-for="(status,index) in statusList" :value="status" :key="index + ''">
                      {{ status }}
                    </a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="8">
                <a-form-model-item label="责任人" prop="responsible">
                  <a-input v-model="form.responsible"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="标签" prop="tag">
                  <a-input placeholder="可输入自定义标签" v-model="form.tag"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="服务（前置URL）" prop="service">
                  <a-select
                    v-model="form.service"
                  >
                    <a-select-option v-for="(service,index) in serviceList" :value="service" :key="index + ''">
                      {{ service }}
                    </a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="24">
                <a-form-model-item label="说明" prop="instructions">
                  <a-textarea
                    v-model="form.instructions"
                    :auto-size="{ minRows: 2, maxRows: 6 }"
                  />
                </a-form-model-item>
              </a-col>
            </a-row>
          </a-form-model>
        </div>
        <div class="parameter">
          <div class="tit">
            请求参数
          </div>
          <div class="request-tabs">
            <a-tabs default-active-key="1">
              <a-tab-pane key="1">
                <div slot="tab" class="tab-name">
                  Params
                  <div class="num" v-show="getParamsNum('queryParamData','pathParamData') !== 0">
                    {{ getParamsNum('queryParamData', 'pathParamData') }}
                  </div>
                </div>
                <div class="tit">Query 参数
                  <a-icon @click="addParam('queryParamData')" style="color: #2BAEF2;cursor: pointer"
                          type="plus-circle"/>
                </div>
                <div class="table">
                  <a-table
                    bordered
                    :data-source="queryParamData"
                    :pagination="false"
                    :columns="queryColumns"
                  >
                    <template slot="name" slot-scope="text, record">
                      <a-input v-model="record.name" placeholder="添加参数">
                      </a-input>
                    </template>
                    <template slot="type" slot-scope="text, record">
                      <a-select
                        default-value="string"
                        v-model="record.type"
                      >
                        <a-select-option v-for="(type,index) in paramTypeList" :value="type" :key="index + ''">
                          {{ type }}
                        </a-select-option>
                      </a-select>
                    </template>
                    <template slot="require" slot-scope="text, record">
                      <a-checkbox :checked="record.require" @change="record.require = !record.require"></a-checkbox>
                    </template>
                    <template slot="input" slot-scope="text, record, index, column">
                      <a-input v-model="record[column.dataIndex]">
                      </a-input>
                    </template>
                    <template slot="opt" slot-scope="text, record">
                      <a-icon @click="delParam(record.name, 'queryParamData')" style="color: #f5222d;cursor: pointer"
                              type="close-circle"/>
                    </template>
                  </a-table>
                </div>
                <div v-show="showPathParam">
                  <div class="tit">Path 参数</div>
                  <div class="table">
                    <a-table
                      bordered
                      :data-source="pathParamData"
                      :pagination="false"
                      :columns="pathColumns"
                    >
                      <template slot="name" slot-scope="text, record">
                        <a-popover>
                          <template slot="content">
                            自动提取接口路径{param}形式参数，请在接口路径中修改
                          </template>
                          {{ text }}
                        </a-popover>
                      </template>
                      <template slot="type" slot-scope="text, record">
                        <a-select
                          default-value="string"
                          v-model="record.type"
                        >
                          <a-select-option v-for="(type,index) in paramTypeList" :value="type" :key="index + ''">
                            {{ type }}
                          </a-select-option>
                        </a-select>
                      </template>
                      <template slot="require" slot-scope="text, record">
                        <a-checkbox checked="true" disabled="true"></a-checkbox>
                      </template>
                      <template slot="input" slot-scope="text, record, index, column">
                        <a-input v-model="record[column.dataIndex]">
                        </a-input>
                      </template>
                    </a-table>
                  </div>
                </div>
              </a-tab-pane>
              <a-tab-pane key="2">
                <div slot="tab" class="tab-name">
                  Body
                  <div class="num" v-show="getParamsNum('bodyFormData') !== 0">{{ getParamsNum('bodyFormData') }}</div>
                </div>
                <div class="bodyList">
                  <div
                    @click="activeItem = item"
                    class="item"
                    :class="{'activeItem': activeItem === item}"
                    v-for="item in requestBodyList"
                    :key="item.id"
                  >
                    {{ item }}
                  </div>
                </div>
                <div class="bodyContent">
                  <div v-show="activeItem === 'none'" class="no">
                    该请求没有Body体
                  </div>
                  <div v-show="['form-data', 'x-www-form-urlencoded'].includes(activeItem)" class="formTable">
                    <a-icon @click="addParam('bodyFormData')"
                            style="font-size:17px;margin-bottom:10px;color: #2BAEF2;cursor: pointer"
                            type="plus-circle"/>
                    <div class="table">
                      <a-table
                        bordered
                        :data-source="bodyFormData"
                        :pagination="false"
                        :columns="queryColumns"
                      >
                        <template slot="name" slot-scope="text, record">
                          <a-input v-model="record.name" placeholder="添加参数">
                          </a-input>
                        </template>
                        <template slot="type" slot-scope="text, record">
                          <a-select
                            default-value="string"
                            v-model="record.type"
                          >
                            <a-select-option v-for="(type,index) in paramTypeList" :value="type" :key="index + ''">
                              {{ type }}
                            </a-select-option>
                          </a-select>
                        </template>
                        <template slot="require" slot-scope="text, record">
                          <a-checkbox :checked="record.require" @change="record.require = !record.require"></a-checkbox>
                        </template>
                        <template slot="input" slot-scope="text, record, index, column">
                          <a-input v-model="record[column.dataIndex]">
                          </a-input>
                        </template>
                        <template slot="opt" slot-scope="text, record">
                          <a-icon @click="delParam(record.name, 'bodyFormData')" style="color: #f5222d;cursor: pointer"
                                  type="close-circle"/>
                        </template>
                      </a-table>
                    </div>
                  </div>
                </div>
              </a-tab-pane>
              <a-tab-pane key="3">
                <div slot="tab" class="tab-name">
                  Header
                  <div class="num" v-show="getParamsNum('headerParamData') !== 0">{{ getParamsNum('headerParamData')
                    }}
                  </div>
                </div>
                <div class="headerContent">
                  <a-icon @click="addParam('headerParamData')"
                          style="font-size:17px;margin-bottom:10px;color: #2BAEF2;cursor: pointer" type="plus-circle"/>
                  <div class="table">
                    <a-table
                      bordered
                      :data-source="headerParamData"
                      :pagination="false"
                      :columns="queryColumns"
                    >
                      <template slot="name" slot-scope="text, record">
                        <a-input v-model="record.name" placeholder="添加参数">
                        </a-input>
                      </template>
                      <template slot="type" slot-scope="text, record">
                        <a-select
                          default-value="string"
                          v-model="record.type"
                        >
                          <a-select-option v-for="(type,index) in paramTypeList" :value="type" :key="index + ''">
                            {{ type }}
                          </a-select-option>
                        </a-select>
                      </template>
                      <template slot="require" slot-scope="text, record">
                        <a-checkbox :checked="record.require" @change="record.require = !record.require"></a-checkbox>
                      </template>
                      <template slot="input" slot-scope="text, record, index, column">
                        <a-input v-model="record[column.dataIndex]">
                        </a-input>
                      </template>
                      <template slot="opt" slot-scope="text, record">
                        <a-icon @click="delParam(record.name, 'headerParamData')" style="color: #f5222d;cursor: pointer"
                                type="close-circle"/>
                      </template>
                    </a-table>
                  </div>
                </div>
              </a-tab-pane>
              <a-tab-pane key="4">
                <div slot="tab" class="tab-name">
                  Cookie
                  <div class="num" v-show="getParamsNum('cookieParamData') !== 0">{{ getParamsNum('cookieParamData')
                    }}
                  </div>
                </div>
                <div class="cookieContent">
                  <a-icon @click="addParam('cookieParamData')"
                          style="font-size:17px;margin-bottom:10px;color: #2BAEF2;cursor: pointer" type="plus-circle"/>
                  <div class="table">
                    <a-table
                      bordered
                      :data-source="cookieParamData"
                      :pagination="false"
                      :columns="queryColumns"
                    >
                      <template slot="name" slot-scope="text, record">
                        <a-input v-model="record.name" placeholder="添加参数">
                        </a-input>
                      </template>
                      <template slot="type" slot-scope="text, record">
                        <a-select
                          default-value="string"
                          v-model="record.type"
                        >
                          <a-select-option v-for="(type,index) in paramTypeList" :value="type" :key="index + ''">
                            {{ type }}
                          </a-select-option>
                        </a-select>
                      </template>
                      <template slot="require" slot-scope="text, record">
                        <a-checkbox :checked="record.require" @change="record.require = !record.require"></a-checkbox>
                      </template>
                      <template slot="input" slot-scope="text, record, index, column">
                        <a-input v-model="record[column.dataIndex]">
                        </a-input>
                      </template>
                      <template slot="opt" slot-scope="text, record">
                        <a-icon @click="delParam(record.name, 'cookieParamData')" style="color: #f5222d;cursor: pointer"
                                type="close-circle"/>
                      </template>
                    </a-table>
                  </div>
                </div>
              </a-tab-pane>
              <a-tab-pane key="5" tab="Auth">
                <div class="authContent">
                  <div class="tit">类型</div>
                  <a-select style="width: 50%" v-model="authType">
                    <a-select-option v-for="(type,index) in authTypeList" :value="type" :key="index + ''">
                      {{ type }}
                    </a-select-option>
                  </a-select>
                </div>
              </a-tab-pane>
              <a-tab-pane key="6" tab="设置">

              </a-tab-pane>
            </a-tabs>
          </div>
          <div class="tit">
            返回响应
          </div>
          <div class="response-tabs">
            <div class="addTab" @click="addResponse">
              <a-icon type="plus"/>
              添加
            </div>
            <a-tabs v-model="responseActiveKey" hide-add type="editable-card" @edit="onEdit">
              <a-tab-pane v-for="pane in panes" :key="pane.key" :tab="`${pane.name}(${pane.code})`"
                          :closable="pane.closable">
                <div class="response-content">
                  <div class="top">
                    <div>HTTP状态码：</div>
                    <div class="input">
                      <a-input v-model="pane.code" @focus="showCodeList = true" @blur="showCodeList = false"
                               default-value="200" @change="codeChange($event.target.value,pane,true)"></a-input>
                      <div v-show="showCodeList" class="codeList">
                        <div @mousedown="codeChange(code.code,pane)" class="item" v-for="code in statusCode"
                             :key="code.code">
                          {{ code.code }}
                          <span>{{ code.descEn }}</span>
                          <a-popover>
                            <template slot="content">
                              {{ code.descCh }}
                            </template>
                            <a-icon type="info-circle"/>
                          </a-popover>
                        </div>
                      </div>
                    </div>
                    <div>名称：</div>
                    <div class="input2">
                      <a-input v-model="pane.name"></a-input>
                    </div>
                    <div>内容格式：</div>
                    <div class="input3">
                      <a-select
                        style="width: 100%"
                        default-value="JSON"
                        v-model="pane.contentType"
                      >
                        <a-select-option v-for="typeData in contentTypeList" :key="typeData">
                          {{ type }}
                        </a-select-option>
                      </a-select>
                    </div>
                  </div>
                  <div class="btns">
                    <div class="item">
                      <a-icon type="plus-square"/>
                      JSON/XML 智能识别/快捷导入
                    </div>
                    <div class="item">
                      <a-icon type="eye"/>
                      预览
                    </div>
                    <div class="item">
                      <a-icon type="code"/>
                      生成代码
                    </div>
                  </div>
                </div>
              </a-tab-pane>
            </a-tabs>
          </div>
          <div class="tit">
            响应示例
          </div>
          <div class="response-example">
            <div v-if="examplePanes.length === 0" class="addExample">
              <div @click="addResponseExample" class="btn">添加示例</div>
            </div>
            <div v-else>
              <div class="addTab" @click="addResponseExample">
                <a-icon type="plus"/>
                添加
              </div>
              <a-tabs v-model="exampleActiveKey" hide-add type="editable-card" @edit="onEditExample">
                <a-tab-pane v-for="pane in examplePanes" :key="pane.key" :tab="pane.name">
                  <div class="example-content">

                  </div>
                </a-tab-pane>
              </a-tabs>
            </div>
          </div>
        </div>
      </div>
      <div class="footer">
        <div v-show="showMenu" @click="showMenu = false">
          <a-icon type="double-left"/>
        </div>
        <div v-show="!showMenu" @click="showMenu = true">
          <a-icon type="double-right"/>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {getColumns} from '@/api/tableColumns'
  import orupService from '@/api/orupService'

  export default {
    name: 'ProjectManageDetail',
    data() {
      return {
        treeData: [
          {
            id: 1,
            name: '接口',
            children: [],
            scopedSlots: {title: 'topLevel'}
          }
        ],
        replaceFields: {
          key: 'id',
          title: 'name',
          children: 'children'
        },
        showMenu: true,
        showAdd: false,
        showAddList: false,
        showInterfaceTree: false,
        typeList: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
        interfaceType: 'GET',
        interfacePath: '',
        form: {
          status: '开发中'
        },
        rules: {
          name: [{required: true, message: '名称必填', trigger: 'change'}],
          group: [{required: true, message: '分组必填', trigger: 'change'}],
          status: [{required: true, message: '请选择状态', trigger: 'change'}]
        },
        statusList: ['开发中', '测试中', '已发布', '将废弃'],
        serviceList: ['继承父级  跟随父级分组设置（推荐）'],
        queryParamData: [
          {
            name: '',
            type: 'string',
            require: false,
            example: '',
            desc: ''
          }
        ],
        bodyFormData: [
          {
            name: '',
            type: 'string',
            require: false,
            example: '',
            desc: ''
          }
        ],
        headerParamData: [
          {
            name: '',
            type: 'string',
            require: false,
            example: '',
            desc: ''
          }
        ],
        cookieParamData: [
          {
            name: '',
            type: 'string',
            require: false,
            example: '',
            desc: ''
          }
        ],
        queryColumns: getColumns('interfaceQueryParams'),
        pathColumns: getColumns('interfacePathParams'),
        paramTypeList: ['string', 'integer', 'number', 'array'],
        showPathParam: false,
        pathParamData: [],
        responseActiveKey: '1',
        panes: [
          {
            name: '成功',
            content: '',
            key: '1',
            closable: false,
            code: '200',
            contentType: 'JSON'
          }
        ],
        statusCode: [
          {
            code: '200',
            descEn: 'OK',
            descCh: '请求成功。'
          },
          {
            code: '201',
            descEn: 'Created',
            descCh: '请求成功，并且创建了一个新资源。这通常是在 POST 请求或部分 PUT 请求后发送的响应。'
          },
          {
            code: '202',
            descEn: 'Accepted',
            descCh: '请求已收到，但尚未采取行动。'
          },
          {
            code: '204',
            descEn: 'No Content',
            descCh: '此请求没有要发送的内容，但标头可能有用。'
          },
          {
            code: '400',
            descEn: 'Bad Request',
            descCh: '由于被视为客户端错误的某种原因，服务器无法或不愿处理请求。'
          },
          {
            code: '401',
            descEn: 'Unauthorized',
            descCh: '尽管HTTP标准指定为“未授权”，但从语义上讲，此响应意味着“未认证”。'
          },
          {
            code: '403',
            descEn: 'Forbidden',
            descCh: '客户端没有访问内容的权限;也就是说，它未获授权，因此服务器拒绝提供所请求的资源。'
          },
          {
            code: '404',
            descEn: 'Not Found',
            descCh: '服务器找不到请求的资源。在浏览器中，这意味着 URL 无法识别。在 API中，这还可能意味着端点是有效的但资源本身不存在。'
          },
          {
            code: '410',
            descEn: 'Gone',
            descCh: '当请求的内容已从服务器永久删除，且无转发地址时发送此响应。'
          },
          {
            code: '422',
            descEn: 'Unprocessable Content',
            descCh: '请求格式正确，但由于语义错误无法执行。'
          },
          {
            code: '500',
            descEn: 'Internal Server Error',
            descCh: '服务器遇到无法处理的情况。'
          },
          {
            code: '502',
            descEn: 'Bad Gateway',
            descCh: '当服务器作为网关获取处理请求所需响应时，收到无效响应时发送此错误响应。'
          },
          {
            code: '503',
            descEn: 'Service Unavailable',
            descCh: '服务器尚未准备好处理请求。'
          },
          {
            code: '504',
            descEn: 'Gateway Timeout',
            descCh: '当服务器充当网关时无法及时获取响应时，发送此错误响应。'
          }
        ],
        showCodeList: false,
        statusName: {
          200: '成功',
          201: '成功',
          202: '成功',
          204: '删除成功',
          400: '请求有误',
          401: '没有权限',
          403: '禁止访问',
          404: '记录不存在',
          410: '记录不存在',
          422: '参数错误',
          500: '服务器错误',
          502: '网关错误',
          503: '服务器故障',
          504: '网关超时'
        },
        contentTypeList: ['JSON', 'XML', 'HTML', 'Raw', 'Binary', 'MsgPack', 'Event-Stream'],
        newResponseTabIndex: 0,
        newExampleTabIndex: 0,
        examplePanes: [],
        exampleActiveKey: '',
        requestBodyList: ['none', 'form-data', 'x-www-form-urlencoded', 'json', 'xml', 'raw', 'binary', 'GraphQL', 'msgpack'],
        activeItem: 'none',
        authType: '从父级继承',
        authTypeList: ['从父级继承', 'No Auth', 'API Key', 'Bearer Token', 'JWT', 'Basic Auth', 'Digest Auth', 'OAuth 1.0', 'Hawk Authentication', 'AWS Signature', 'NTLM Authentication', 'Akamai EdgeGrid']
      }
    },
    props: {
      project: {
        type: Object,
        default: () => ({})
      },
      type: {
        type: String,
        default: ''
      }
    },
    created() {
      console.log(this.project.id)
      this.getDetail(this.project.id)
    },
    methods: {
      addNode(nodeData) {
        // 创建新节点
        const newNode = {
          title: 'New Node',
          key: '0-2'
        };

        debugger;
      },
      onSelect(selectedKeys, info) {
        console.log('selected', selectedKeys, info)
      },
      createInterface() {

      },
      getDetail(id) {
        const data = {
          pageIndex: 0,
          pageSize: 10,
          filterText: '',
          projectId: id,
          requestMethod: 'post',
          loadInterface: true
        }
        orupService.projectInterfaceTreeQuery(data).then(res => {
          console.log(res)
          if (res && res.length > 0) {
            this.treeData[0].children = res
          }
        })
      },
      addInterface() {
        this.$emit('addInterface')
      },
      toDeatil() {
        this.$emit('toProjectDetail')
      },
      save() {

      },
      delParam(name, type) {
        const data = [...this[type]]
        this[type] = data.filter(item => item.name !== name)
      },
      addParam(type) {
        if (this[type].find(item => item.name === '')) {
          return
        }
        const newParam = {
          name: '',
          type: 'string',
          require: false,
          example: '',
          desc: ''
        }
        this[type].push(newParam)
      },
      onEdit(targetKey, action) {
        this[action](targetKey, 'response')
      },
      onEditExample(targetKey, action) {
        this[action](targetKey, 'example')
      },
      remove(targetKey, type) {
        if (type === 'response') {
          let activeKey = this.responseActiveKey
          let lastIndex
          this.panes.forEach((pane, i) => {
            if (pane.key === targetKey) {
              lastIndex = i - 1
            }
          })
          const panes = this.panes.filter(pane => pane.key !== targetKey)
          if (panes.length && activeKey === targetKey) {
            if (lastIndex >= 0) {
              activeKey = panes[lastIndex].key
            } else {
              activeKey = panes[0].key
            }
          }
          this.panes = panes
          this.responseActiveKey = activeKey
        } else {
          let activeKey = this.exampleActiveKey
          let lastIndex
          this.examplePanes.forEach((pane, i) => {
            if (pane.key === targetKey) {
              lastIndex = i - 1
            }
          })
          const panes = this.examplePanes.filter(pane => pane.key !== targetKey)
          if (panes.length && activeKey === targetKey) {
            if (lastIndex >= 0) {
              activeKey = panes[lastIndex].key
            } else {
              activeKey = panes[0].key
            }
          }
          this.examplePanes = panes
          this.exampleActiveKey = activeKey
        }
      },
      codeChange(code, pane, isInput) {
        const panes = this.panes
        panes.forEach(item => {
          if (pane.key === item.key) {
            item.code = code
            if (!isInput) {
              item.name = this.statusName[code]
            }
          }
        })
        this.panes = panes
      },
      addResponse() {
        const _this = this
        this.$dialog({
          title: '添加响应',
          content: () => import('./dialog/AddResponse'),
          width: 600,
          centered: true,
          maskClosable: false,
          on: {
            ok(ctl) {
              const dialogCtl = ctl.getDialogCtl()
              const valid = dialogCtl.submit()
              if (valid) {
                _this.addResponsePane(dialogCtl.form)
                ctl.closeDialog()
              }
            }
          }
        })
      },
      addResponsePane(data) {
        const panes = this.panes
        const activeKey = `newTab${this.newResponseTabIndex++}`
        panes.push({
          name: data.name,
          content: '',
          key: activeKey,
          code: data.code,
          contentType: data.contentType
        })
        this.panes = panes
        this.responseActiveKey = activeKey
      },
      addResponseExample() {
        const _this = this
        this.$dialog({
          title: '添加示例',
          content: () => import('./dialog/AddResponseExample'),
          width: 700,
          centered: true,
          maskClosable: false,
          on: {
            ok(ctl) {
              const dialogCtl = ctl.getDialogCtl()
              const valid = dialogCtl.submit()
              if (valid) {
                _this.addResponseExamplePane(dialogCtl.form)
                ctl.closeDialog()
              }
            }
          }
        })
      },
      addResponseExamplePane(data) {
        const panes = this.examplePanes
        const activeKey = `newTab${this.newExampleTabIndex++}`
        panes.push({
          name: data.name,
          content: '',
          key: activeKey
        })
        this.examplePanes = panes
        this.exampleActiveKey = activeKey
      },
      getParamsNum(data1, data2) {
        let num = 0
        this[data1].forEach(item => {
          if (item.name !== '') {
            num += 1
          }
        })
        if (data2) {
          this[data2].forEach(item => {
            if (item.name !== '') {
              num += 1
            }
          })
        }
        return num
      }
    },
    watch: {
      interfacePath(newVal) {
        this.pathParamData = []
        const regex = /(?<=\{)(.+?)(?=\})/g // {}花括号
        const arr = newVal.match(regex)
        if (arr && arr.length) {
          this.showPathParam = true
          arr.forEach(item => {
            this.pathParamData.push({
              name: item,
              type: 'string',
              example: '',
              desc: ''
            })
          })
        } else {
          this.showPathParam = false
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  .ProjectManageDetail {
    padding-top: 10px;
    display: flex;
    .menu {
      width: 25%;
      flex: none;
      border-right: 1px solid #CCCCCC;
      padding: 0 5px;
      .activeMenu {
        background-color: #f0fcff;
        color: #2BAEF2;
      }
      .xmgl {
        width: 100%;
        height: 30px;
        line-height: 30px;
        padding: 0px 10px;
        cursor: pointer;
        border-radius: 5px;
        margin-bottom: 15px;
        &:hover {
          background-color: #f0fcff;
          color: #2BAEF2;
        }
      }

      .tree {
        width: 100%;
        height: calc(97% - 30px);
        overflow-x: hidden;
        overflow-y: auto;
      }

      .interface {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 30px;
        border-radius: 5px;
        line-height: 30px;
        padding: 0px 10px;
        cursor: pointer;
        .text {
          i {
            font-size: 12px;
          }
        }
        &:hover {
          background-color: #f0fcff;
          color: #2BAEF2;
        }
        .btn {
          width: 20px;
          height: 30px;
          text-align: center;
          line-height: 20px;
          border-radius: 3px;
          cursor: pointer;
          position: relative;
          display: flex;
          align-items: center;
          .icon {
            width: 20px;
            height: 20px;
            text-align: center;
            &:hover {
              background-color: #e8e8e8;
            }
          }
          .addList {
            width: 150px;
            border: 1px solid #e8e8e8;
            border-radius: 5px;
            padding: 5px;
            box-shadow: 0px 3px 18px 0px rgba(0, 0, 0, 0.05);
            position: absolute;
            left: 0;
            top: 26px;
            background-color: white;
            z-index: 1000;
            .item {
              width: 100%;
              height: 30px;
              padding: 0 15px;
              line-height: 30px;
              border-radius: 5px;
              text-align: left;
              color: rgba(0, 0, 0, 0.65);
              &:hover {
                background-color: #f0fcff;
                color: #2BAEF2;
              }
            }
          }
        }
      }
    }
    .content {
      width: 80%;
      height: 100%;
      position: relative;
      .detail {
        padding: 15px;
        height: 90%;
        display: flex;
        flex-direction: column;
        .tit {
          font-size: 17px;
          margin-bottom: 10px;
        }
        .tip {
          color: #CCCCCC;
          margin-bottom: 10px;
        }
        .xmtj {
          display: flex;
          flex-direction: column;
          width: 100%;
          height: 120px;
          border-radius: 5px;
          border: 1px solid #e8e8e8;
          padding: 10px 15px;
          margin-bottom: 20px;
          .tit {
            text-align: left;
            font-size: 17px;
            margin-bottom: 10px;
          }
          .val {
            display: flex;
            justify-content: space-between;
            .item {
              width: 16%;
              .num {
                font-size: 20px;
                margin-bottom: 10px;
                font-weight: 500;
              }
            }

          }
        }
        .share {
          width: 100%;
          height: 120px;
          border-radius: 5px;
          border: 1px solid #e8e8e8;
          padding: 10px 15px;
          margin-bottom: 20px;
          .btn {
            text-align: center;
            color: #2BAEF2;
            span {
              cursor: pointer;
            }
          }
        }
        .tools {
          width: 100%;
          height: 155px;
          display: flex;
          justify-content: space-between;
          margin-bottom: 20px;
          .item {
            width: 49%;
            height: 100%;
            border-radius: 5px;
            border: 1px solid #e8e8e8;
            padding: 10px 15px;
            position: relative;
            .btn {
              position: absolute;
              bottom: 10px;
              width: 90px;
              height: 30px;
              line-height: 30px;
              text-align: center;
              border-radius: 3px;
              background-color: #f0fcff;
              cursor: pointer;
              color: #2BAEF2;
            }
          }
        }
        .opt {
          width: 100%;
          height: 200px;
          border-radius: 5px;
          border: 1px solid #e8e8e8;
          padding: 10px 15px;
          .btn {
            margin-top: 30px;
            text-align: center;
            span {
              cursor: pointer;
              color: #2BAEF2;
              i {
                font-size: 10px !important;
              }
            }
          }
        }
      }
      .newInterface {
        padding: 15px;
        height: 90%;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        .top {
          width: 100%;
          height: 35px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .path {
            width: 100%;
            height: 100%;
            margin-right: 15px;
            display: flex;
            align-items: center;
            .type {
              display: flex;
              align-items: center;
              width: 110px;
              height: 100%;
              /deep/ .ant-select-selection--single {
                height: 35px;
                display: flex;
                align-items: center;
                border-radius: 5px 0 0 5px;
              }
            }
            .url {
              width: 100%;
              height: 100%;
              /deep/ .ant-input {
                border-left: none;
                border-radius: 0 5px 5px 0;
              }
            }
          }
        }
        .form {
          padding-top: 15px;
          /deep/ .ant-col-8 {
            padding-right: 15px;
          }
        }
        .parameter {
          .tit {
            font-size: 17px;
            margin-bottom: 10px;
          }
          .request-tabs {
            margin-bottom: 40px;
            .tab-name {
              display: flex;
              align-items: center;
              .num {
                font-size: 12px;
                width: 16px;
                height: 16px;
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: #5657580A;
                border-radius: 50%;
                color: #4CAF50;
                margin-left: 5px;
                font-weight: 400;
              }
            }
            .tit {
              padding-top: 10px;
              color: rgba(0, 0, 0, 0.5);
              i {
                margin-left: 20px;
              }
            }
            /deep/ .ant-table-tbody {
              td {
                padding: 0 !important;
              }
            }
            input {
              border: none;
            }
            .table {
              /deep/ .ant-select {
                width: 100%;
                .ant-select-selection {
                  border: none;
                }
              }
            }
            .bodyList {
              padding-top: 15px;
              display: flex;
              .item {
                display: inline-block;
                margin-right: 15px;
                padding: 0 10px;
                border-radius: 8px;
                cursor: pointer;
                &:hover {
                  color: #2BAEF2;
                }
              }
              .activeItem {
                background-color: #2BAEF2;
                color: white;
                &:hover {
                  color: white;
                }
              }
            }
            .bodyContent {
              padding-top: 10px;
              .no {
                height: 100px;
                line-height: 100px;
                text-align: center;
                border-radius: 5px;
                border: 1px solid #e8e8e8;
                color: rgba(0, 0, 0, 0.3);
              }
            }
            .headerContent,
            .cookieContent {
              padding-top: 15px;
            }
            .authContent {
              padding-top: 20px;
              height: 120px;
              display: flex;
              justify-content: center;
              align-items: center;
              .tit {
                color: #555;
                margin-right: 20px;
              }
            }
          }
          .response-tabs {
            position: relative;
            .addTab {
              height: 30px;
              display: inline-block;
              position: absolute;
              top: 15px;
              right: 15px;
              cursor: pointer;
              color: #2BAEF2;
              z-index: 1000;
            }
            .response-content {
              min-height: 250px;
              .top {
                padding: 30px;
                display: flex;
                justify-content: center;
                .input {
                  width: 60px;
                  height: 32px;
                  position: relative;
                  margin-right: 30px;
                  .codeList {
                    width: 300px;
                    height: 200px;
                    overflow-y: auto;
                    border: 1px solid #e8e8e8;
                    border-radius: 5px;
                    padding: 5px;
                    box-shadow: 0px 3px 18px 0px rgba(0, 0, 0, 0.05);
                    position: absolute;
                    left: 0;
                    top: 35px;
                    background-color: white;
                    z-index: 1000;
                    .item {
                      width: 100%;
                      height: 30px;
                      padding: 0 15px;
                      line-height: 30px;
                      border-radius: 5px;
                      text-align: left;
                      color: rgba(0, 0, 0, 0.65);
                      cursor: pointer;
                      position: relative;
                      &:hover {
                        background-color: #f0fcff;
                        color: #2BAEF2;
                      }
                      span {
                        margin-left: 15px;
                        color: lightgray;
                      }
                      i {
                        position: absolute;
                        top: 8px;
                        right: 10px;
                        color: lightgray;
                        cursor: pointer;
                        color: rgba(0, 0, 0, 0.65);
                      }
                    }
                  }
                }
                .input2 {
                  width: 100px;
                  margin-right: 30px;
                }
                .input3 {
                  width: 150px;
                }
              }
              .btns {
                padding-top: 15px;
                display: flex;
                justify-content: center;
                .item {
                  display: inline-block;
                  padding: 5px 10px;
                  margin-right: 30px;
                  cursor: pointer;
                  border-radius: 5px;
                  background-color: #fafafa;
                  color: #2BAEF2;
                }
              }
            }

          }
          .response-example {
            position: relative;
            .addExample {
              height: 100px;
              border-radius: 5px;
              border: 1px solid #e8e8e8;
              display: flex;
              align-items: center;
              justify-content: center;
              .btn {
                display: inline-block;
                padding: 10px 15px;
                border-radius: 5px;
                cursor: pointer;
                background-color: #fafafa;
                color: #2BAEF2;
              }
            }
            .addTab {
              height: 30px;
              display: inline-block;
              position: absolute;
              top: 15px;
              right: 15px;
              cursor: pointer;
              color: #2BAEF2;
              z-index: 1000;
            }
            .example-content {
              min-height: 200px;
            }
          }
        }
      }
      .footer {
        width: 100%;
        height: 10%;
        font-weight: bold;
        border-top: 1px solid #e8e8e8;
        padding-left: 20px;
        div {
          width: 30px;
          height: 30px;
          line-height: 30px;
          border-radius: 3px;
          cursor: pointer;
          text-align: center;
          &:hover {
            background-color: #e8e8e8;
          }
        }
      }
    }
    .content2 {
      width: 100%;
    }
  }
</style>
